<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>designer tool</title>
    <link rel="stylesheet" href="../../design/css/fontawesome-free-6.4.0-web/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0; /* Light gray background */
        }
        #grid {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            pointer-events: none; /* Allow interaction with elements below the grid */
            z-index: 9999;
            background-image:
                    linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
            background-size: 10px 10px; /* Adjust the grid size as needed */
        }
        .grid-label {
            position: absolute;
            font-size: 10px;
            color: rgba(0, 0, 0, 0.7);
            pointer-events: none;
        }
        .top-label {
            transform: translateX(-50%);
            top: 20px;
        }
        .left-label {
            transform: translateY(-50%);
            left:20px;
        }
        draggable-component {
            display: block;
            position: absolute;
            width: auto;
            height: auto;
            /*background-color: lightblue;*/
            /*border: 2px solid black;*/
            top: 50px;
            left: 50px;
        }
        .resizer {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: se-resize; /* 设置光标形状 */
        }
        .floating-div {
            position: absolute;
            width: auto;
            height: auto;
            background-color: rgba(102, 255, 37, 0.50);
            color: white;
            text-align: center;
            line-height: 25px;
            font-size: 20px;
            display: none; /* 初始状态下隐藏 */
            pointer-events: none; /* 忽略鼠标事件 */
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 10001;
        }
        @font-face {
            font-family: 'GokFont';
            font-style: normal;
            font-weight: 400;
            src: url('/static/zonghezhanshi/good_webpages/css/fonts/gok.woff2') format('woff2');
        }
        @font-face {
            font-family: 'ico';
            src: url("data:application/octet-stream;base64,d09GRgABAAAAAA3MABAAAAAAFdAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcZZJr3kdERUYAAAGIAAAAHwAAACAANgAGT1MvMgAAAagAAABHAAAAVj4nWUhjbWFwAAAB8AAAAEwAAAFW0CkD5WN2dCAAAAI8AAAAFAAAABwG1/8IZnBnbQAAAlAAAAT5AAAJkYoKeDtnYXNwAAAHTAAAAAgAAAAIAAAAEGdseWYAAAdUAAAETwAABla173lDaGVhZAAAC6QAAAAzAAAANv9VQE9oaGVhAAAL2AAAAB4AAAAkB9wDo2htdHgAAAv4AAAAJAAAACQasQBdbG9jYQAADBwAAAAUAAAAFAS6BnNtYXhwAAAMMAAAACAAAAAgAR4KLW5hbWUAAAxQAAAA1wAAAVaRnTKOcG9zdAAADSgAAABLAAAAYtX5CoJwcmVwAAANdAAAAFYAAABWkqGa/3icY2BgYGQAgpOd+YYg+hxLXRiMBgA7fwVAAAB4nGNgZGBg4ANiCQYQYGJgZGBm4ACSLGAeAwAEvAA9AHicY2BknsI4gYGVgYOpi2kPAwNDD4RmfMBgyMjEwMDEwMrMAAcCCCZDQJprCoPDC4YXrMxB/7MYopiDGKYChRlBcgD9QAv9AHic3YzbDcAgDAMv5dEOwRgMwv4TsAV1gB9WwJJ1ceQECCwXDFdTspkjVcyi8UBPY3ihszhbUX7VCZoSn5aZ/UjUlV8eMq7XD+jxBt54nGNgQANGDEbMQf+zQRgAEdYD43icnVXZdtNWFJU8ZHASOmSgoA7X3DhQ68qEKRgwaSrFdiEdHAitBB2kDHTkncc+62uOQrtWH/m07n09JLR0rbYsls++R1tn2DrnRhwjKn0aiGvUoZKXA6msPZZK90lc13Uvj5UMBnFdthJPSZuonSRKat3sUC7xWOsqWSdYJ+PlIFZPVZ5noAziFB5lSUQbRBuplyZJ4onjJ4kWZxAfJUkgJaMQp9LIUEI1GsRS1aFM6dCr1xNx00DKRqMedVhU90PFJ8c1p9SsA0YqVznCFevVRr4bpwMve5DEOsGzrYcxHnisfpQqkIqR6cg/dkpOlIaBVHHUoVbi6DCTX/eRTCrNQKaMYkWl7oG43f102xYxPXQ6vi5KlUaqurnOKJrt0fGogygP2cbppNzQ2fbw5RlTVKtdcbPtQGYNXErJbHSfRAAdJlLj6QFONZwCqRn1R8XZ588BEslclKo8VTKHegOZMzt7cTHtbiersnCknwcyb3Z2452HQ6dXh3/R+hdM4cxHj+Jifj5C+lBqfiJOJKVGWMzyp4YfcVcgQrkxiAsXyuBThDl0RdrZZl3jtTH2hs/5SqlhPQna6KP4fgr9TiQrHGdRo/VInM1j13Wt3GdQS7W7Fzsyr0OVIu7vCwuuM+eEYZ4WC1VfnvneBTT/Bohn/EDeNIVL+5YpSrRvm6JMu2iKCu0SVKVdNsUU7YoppmnPmmKG9h1TzNKeMzLj/8vc55H7HN7xkJv2XeSmfQ+5ad9HbtoPkJtWITdtHblpLyA3rUZu2lWjOnYEGgZpF1IVQdA0svph3Fab9UDWjDR8aWDyLmLI+upER521tcofxX914gsHcmmip7siF5viLq/bFj483e6rj5pG3bDV+MaR8jAeRnocmtBZ+c3hv+1N3S6a7jKqMugBFUwKwABl7UAC0zrbCaT1mqf48gdgXIZ4zkpDtVSfO4am7+V5X/exOfG+x+3GLrdcd3kJWdYNcmP28N9SZKrrH+UtrVQnR6wrJ49VaxhDKrwour6SlHu0tRu/KKmy8l6U1srnk5CbPYMbQlu27mGwI0xpyiUeXlOlKD3UUo6yQyxvKco84JSLC1qGxLgOdQ9qa8TpoXoYGwshhqG0vRBwSCldFd+0ynfxHqtr2Oj4xRXh6XpyEhGf4ir7UfBU10b96A7avGbdMoMpVaqn+4xPsa/b9lFZaaSOsxe3VAfXNOsaORXTT+Rr4HRvOGjdAz1UfDRBI1U1x+jGKGM0ljXl3wR0MVZ+w2jVYvs93E+dpFWsuUuY7JsT9+C0u/0q+7WcW0bW/dcGvW3kip8jMb8tCvw7B2K3ZA3UO5OBGAvIWdAYxhYmdxiug23EbfY/Jqf/34aFRXJXOxq7eerD1ZNRJXfZ8rjLTXZZ16M2R9VOGvsIjS0PN+bY4XIstsRgQbb+wf8x7gF3aVEC4NDIZZiI2nShnurh6h6rsW04VxIBds2x43QAegAuQd8cu9bzCYD13CPnLsB9cgh2yCH4lByCz8i5BfA5OQRfkEMwIIdgl5w7AA/IIXhIDsEeOQSPyNkE+JIcgq/IIYjJIUjIuQ3wmByCJ+QQfE0OwTdGrk5k/pYH2QD6zqKbQKmdGhzaOGRGrk3Y+zxY9oFFZB9aROqRkesT6lMeLPV7i0j9wSJSfzRyY0L9iQdL/dkiUn+xiNRnxpeZIymvDp7zjg7+BJfqrV4AAAAAAQAB//8AD3icjVTNTxtHFH9vZndmdr2sd/F6bcA24I+1axNI7LUtAiIOiTBVoCY1jQL00EMDSEGq1EPUQ3JKFfXGtVKlqpUi5VQ1Sv+DflyqHiP+hp449VKJj741VCSRULvreR+zvxnPe/N7DxgUTl/xP7kJwzAL6527iRjjkpWQayaCzhdpANdhF5AB9pQwOAONM20LJM1LvgWI0AdA6AK0m/WrV2qFyfHsaJo2HE4FpltLeNL1RLmQD9pu0AwX0E/qNCFFIT/NCvlIB2U3bLfarUbdT/mN+gKLjJ+KpipKC4vV61XetuNf3MsvhSvVh18bRtxD15r4cmd+dymZyS3XrwqaYb9UkscLtMBU7OdkJVdhU5niyT3bVjfTufRd3bfx2+Eh5dyamIylM2nfBnoYwOlLvskNCmcP+p21j1AX2/fvdDTQ92YVR2iUR+MawyJypi+CoEgFUNCMY0+irpGhsygJvA8ceffjzf7a+93qe/nxdCoxrNwahEFeeH69lPREHIWkCD1po8zPkENvDfNBsxyUpciTDML2AraDGZzGdjNs3cBW+3yyUR8nh945rPvJlJ+K0kXKTw6288cxh5LNrT9aX3+Enyu5E4t5FaHH1yypVkdGDak5j5XljKV6whFLvqapihlX29JEJXeV7QcRduhdrK6kXPbeAGMh+oP1Px5Top1cMnNN2iL5AerzQ2ol45hyx7DmddHJCVtYdTszFkdLDrCjIxNXpCW9NfE2dDGrKXmGdQgLEZXmTw/Za/YMClDq5PMjjtSA4SInCgLrkWLQJ9Yx6HoZz9MStaJHmaWEykgE4Q0sR6JFGWtHwqfPKfbaWXGmnOfPSaw4kX7Hf3bJ/L8+8NPT07/5BvsV4jAOMzDfma1MME1PO4xxRcfBqFyoOnSqDk4n5hExKJ7eRY0E0VMUyVpEBzlJzKdbbk/W/cR/+HzDt48Oiea+zYcH6lLv0+7AHEh0LnMANOL+Q/4d/5AOm6BcL8NXd16aa/c712IGk8zi8pMhtDgZ2zpyOj3HTeI7U33ijDJv0VWJPggRE7fHOvWzNUxau/930UYnVSwWl4vLS7dvLsxdb5Sa9ISuY6drqUl3kvgfUHGILHo+cb5VesdvUxMpUIaabkg10QwHhZHFxoVFddLlw0eHB9RIlDkQ+MOFfVDNHh1mq9VsNywVS+HBQHaz1R6b2/s+wrwtpo5bEZj9nq22SmFYap3JajbqI4K48Uqb5jHKpYTYOUM+6+ylUSoHDWCLNKtkTG3FURJmdQiprfJVG3Xqs6sWotAYBwNhAwzTNHpgGGYfTMPsWpZSGl3WdC0o5DK+Z8WtuD2kYipmGprUpKB9gLuOU8NkoYluwdVplGgk3DAgEomU6/lEolbijZQ1iFSY28cH5z9K0tHTQffkT6S1FJaOnkbx8SelEFMHB5g7sfCv/ZNv8MHB8W9s7nifvRigjzcixX483ojg7AXJfwBg3+S3AHicY2BkYGAA4j0Td5rF89t8ZeBmfgEUYTjHUhcGpcP///+fzaLHHATkcjAwgUQBWIwMGgB4nGNgZGBgDvqfzRDFov8fCFj0GIAiKIATAKCNBoYAAAPoAAAAAAAAAU0AAAPoACMDWQAAAxEAPANZ//8DoAAABC///wAAAAAAAAAAAIABSgGWAf4CpAMrAAEAAAAJAG0ABgAAAAAAAgAgAC0AbgAAAIAJkQAAAAB4nFWOsW7CMBCGv5CQglp1ZELCQ9dEcRiQGDryAB3YUbCiSCiRDLxBxw6d+gx9AMY+XH8TD61Pd/f5/N+dgSe+SAgnIWUWecIDy8gpK46RM90+Ik955DtyrvqPPMnmquT3rsATnrVh5JRXXiJn0rxHnrLgM3Iuu9HRMEDXKLzhaLly4oDX1bXX00Gwk6Lncs9eCoehpqRS3srHGSNbWcFGXuvdslb70F92g2+dqcvKbI12KVpbbIq6shL8/cNe0z1n1cLOMC/sYe/8uRt6Y8vqn/4X2kEqywB4nH3DwQ2AIAwF0H6oGC5uwlC1VjwAGoIHt9cJfMkjR//iF+Tg4MGYEDDzXiR7PXNQaWqFq7V7USnWNunJ6jWeqIf0kVbpL3XgEFAAS7gAyFJYsQEBjlm5CAAIAGMgsAEjRLADI3CyBCgJRVJEsgoCByqxBgFEsSQBiFFYsECIWLEGA0SxJgGIUVi4BACIWLEGAURZWVlZuAH/hbAEjbEFAEQAAA==") format("woff"), url("data:application/octet-stream;base64,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sAMlsAIlRyNHI2GwAFRYLiA8IyEbsAIlsAIlRyNHI2EgsAUlsAQlRyNHI2GwBiWwBSVJsAIlYbABRWMjIFhiGyFZY7ABRWJgIy4jICA8ijgjIVktsDUssAAWILAIQyAuRyNHI2EgYLAgYGawgGIjICA8ijgtsDYsIyAuRrACJUZSWCA8WS6xJgEUKy2wNywjIC5GsAIlRlBYIDxZLrEmARQrLbA4LCMgLkawAiVGUlggPFkjIC5GsAIlRlBYIDxZLrEmARQrLbA5LLAwKyMgLkawAiVGUlggPFkusSYBFCstsDossDEriiAgPLAEI0KKOCMgLkawAiVGUlggPFkusSYBFCuwBEMusCYrLbA7LLAAFrAEJbAEJiAuRyNHI2GwBkUrIyA8IC4jOLEmARQrLbA8LLEIBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEmARQrLbA9LLAwKy6xJgEUKy2wPiywMSshIyAgPLAEI0IjOLEmARQrsARDLrAmKy2wPyywABUgR7AAI0KyAAEBFRQTLrAsKi2wQCywABUgR7AAI0KyAAEBFRQTLrAsKi2wQSyxAAEUE7AtKi2wQiywLyotsEMssAAWRSMgLiBGiiNhOLEmARQrLbBELLAII0KwQystsEUssgAAPCstsEYssgABPCstsEcssgEAPCstsEgssgEBPCstsEkssgAAPSstsEossgABPSstsEsssgEAPSstsEwssgEBPSstsE0ssgAAOSstsE4ssgABOSstsE8ssgEAOSstsFAssgEBOSstsFEssgAAOystsFIssgABOystsFMssgEAOystsFQssgEBOystsFUssgAAPistsFYssgABPistsFcssgEAPistsFgssgEBPistsFkssgAAOistsFossgABOistsFsssgEAOistsFwssgEBOistsF0ssDIrLrEmARQrLbBeLLAyK7A2Ky2wXyywMiuwNystsGAssAAWsDIrsDgrLbBhLLAzKy6xJgEUKy2wYiywMyuwNistsGMssDMrsDcrLbBkLLAzK7A4Ky2wZSywNCsusSYBFCstsGYssDQrsDYrLbBnLLA0K7A3Ky2waCywNCuwOCstsGkssDUrLrEmARQrLbBqLLA1K7A2Ky2wayywNSuwNystsGwssDUrsDgrLbBtLCuwCGWwAyRQeLABFTAtAAAAS7gAyFJYsQEBjlm5CAAIAGMgsAEjRLADI3CyBCgJRVJEsgoCByqxBgFEsSQBiFFYsECIWLEGA0SxJgGIUVi4BACIWLEGAURZWVlZuAH/hbAEjbEFAEQAAA==") format("truetype");
        }
        @font-face {
            font-family: 'Material Icons';
            font-style: normal;
            font-weight: 400;
            src: url(/static/zonghezhanshi/good_webpages/fonts/media.woff2) format('woff2');
        }
    </style>
<!--    <script src="/static/zonghezhanshi/good_webpages/js/ola.js"></script>-->

    <!--<script src="/static/zonghezhanshi/good_webpages/js/jquery_2.1.3.min.js"></script>-->
    <!--<script src="/static/zonghezhanshi/good_webpages/js/owl.carousel.min.js"></script>-->

<!--    <script src="/static/zonghezhanshi/good_webpages/js/nouislider.min.js"></script>-->
<!--    <script src="/static/zonghezhanshi/good_webpages/js/TweenMax.min.js"></script>-->

    <script src="../js/draggable-component.js"></script>
    <script>
        function isEmptyObject(obj) {
            return Object.keys(obj).length === 0 && obj.constructor === Object;
        }
        function loadStylesheet(filename) {
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = filename;
            link.async = true; // 设置为异步加载
            document.getElementsByTagName('head')[0].appendChild(link);
        }
        function getQueryParams() {
            const queryParams = {};
            const queryString = window.location.search.substring(1);
            const paramsArray = queryString.split('&');

            paramsArray.forEach(param => {
                if (param) {
                    const [key, value] = param.split('=');
                    queryParams[key] = decodeURIComponent(value || '');
                }
            });

            return queryParams;
        }

        // 示例用法
        const params = getQueryParams();
        //console.log(params); // 输出: { key1: 'value1', key2: 'value2' }
        if (isEmptyObject(params)){
            alert("需要输入参数！")
        }
        var v_yingyongname=params['yingyong'];

        //console.log(v_yingyongname);
        const stylesheetName = '../yingyongs/'+v_yingyongname+'/'+v_yingyongname+'.css??v=' + new Date().getTime(); // 这里可以使用任何变量或逻辑来决定文件名
        loadStylesheet(stylesheetName);
    </script>
    <script src="../js/echarts.min.js"></script>

    <script type="module" src="../components/chart-observer-config.js"></script>
    <!-- 1. 区域样式方法 -->
    <script src="../components/chart-updaters/area-style-updaters.js"></script>
    <!-- 2. 柱状图系列方法 -->
    <script src="../components/chart-updaters/bar-series-updaters.js"></script>
    <!-- 3. 坐标轴相关方法 -->
    <script src="../components/chart-updaters/axis-updaters.js"></script>
    <!-- 4. 折线图系列方法 -->
    <script src="../components/chart-updaters/line-series-updaters.js"></script>
    <!-- 5. 图例相关方法 -->
    <script src="../components/chart-updaters/legend-updaters.js"></script>
    <!-- 6. 网格相关方法 -->
    <script src="../components/chart-updaters/grid-updaters.js"></script>
    <!-- 7. 饼图系列方法 -->
    <script src="../components/chart-updaters/pie-series-updaters.js"></script>
    <!-- 8. 雷达图系列方法 -->
    <script src="../components/chart-updaters/radar-series-updaters.js"></script>
    <!-- 9. 散点图系列方法 -->
    <script src="../components/chart-updaters/scatter-series-updaters.js"></script>
    <!-- 10. 系列通用方法 -->
    <script src="../components/chart-updaters/series-common-updaters.js"></script>
    <!-- 11. 标题相关方法 -->
    <script src="../components/chart-updaters/title-updaters.js"></script>
    <!-- 12. 提示框相关方法 -->
    <script src="../components/chart-updaters/tooltip-updaters.js"></script>
    <!-- 13. 属性名转换的js, title-name_text 转 name, title-name-color_text 转nameColor -->
    <script src="../components/attribute-utils.js"></script>
    <!--    动态加载组件js-->
    <script>
        function loadScript(filename) {
            const script = document.createElement('script');
            script.src = filename;
            script.type = 'module';
            script.charset = 'utf-8'; // 确保使用 UTF-8 编码
            script.async = true;
            // 可选：添加事件监听器以检测脚本何时加载完成
            script.onload = function() {
                //console.log('Script loaded and executed:', filename);
            };

            script.onerror = function() {
                console.error('Failed to load script:', filename);
            };

            document.head.appendChild(script); // 将脚本添加到 head 或 body 中
        }

        fetch('../components/elements.json')
            // fetch('/shujuzhanshi/getzujianxinxi')
            // 第一步：将响应转换为JSON格式
            .then(response => response.json())
            // 第二步：处理解析后的JSON数据
            .then(data => {
                data.forEach(item => {
                    if (item.jswenjian != ''){
                        const zujianurl = item.jswenjian;
                        loadScript(zujianurl);
                    }
                });
            })
            // 捕获并打印请求或处理过程中出现的错误
            .catch(err => console.error('加载组件失败:', err));
    </script>

</head>
<body>


<div id="container">
    <div id="content" style="width: 100%;height: 100%">
    </div>
    <script>
        var v_kuan=params['kuan'];
        var v_gao=params['gao'];
        var c_div = document.getElementById('content');
        c_div.style.width = v_kuan+'px';
        c_div.style.height = v_gao+'px';
        async function loadContent(url) {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('网络响应失败');
                }
                const text = await response.text();
                //console.log(text);
                document.getElementById('content').innerHTML = text;
            } catch (error) {
                //console.error('无法加载内容:', error);
            }
        }

        // 加载 subpage.html 的内容
        const contentName = '../yingyongs/'+v_yingyongname+'/'+v_yingyongname+'.html?v=' + new Date().getTime();
        loadContent(contentName);

    </script>


    <div id="grid"></div>
    <div id="coords" class="floating-div"></div>
</div>


<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    const droppable = document.getElementById('content');
    // 允许放置事件
    droppable.addEventListener('dragover', (event) => {
        event.preventDefault();
    });
    function generateRandomString(length) {
        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        let result = '';
        const charactersLength = characters.length;

        for (let i = 0; i < length; i++) {
            const randomIndex = Math.floor(Math.random() * charactersLength);
            result += characters.charAt(randomIndex);
        }

        return result;
    }
    // 生成1到1000之间的随机整数
    function getRandomNumber() {
        return Math.floor(Math.random() * 1000) + 1;
    }
    async function fetchJsonFile(filePath) {
        try {
            const response = await fetch(filePath);
            if (!response.ok) {
                throw new Error('网络响应失败');
            }
            const data = await response.json();
            return data;
        } catch (error) {
            //console.error('读取JSON文件时出错:', error);
        }
    }
    var elements_data = null;
    async function loadElsData() {
        const jsonData = await fetchJsonFile('../components/elements.json');
        // const jsonData = await fetchJsonFile('/shujuzhanshi/getzujianxinxi');
        if (jsonData) {

            elements_data = jsonData;

            elements_data.forEach(item => {
                item.elcontent = item.elcontent.replace(new RegExp("&emsp;", 'g'), "    "); // 假设我们要将每个人的年龄增加 5 岁
            });
        }
    }

    loadElsData();

    function getStringBeforeDelimiter(inputString) {
        // 使用正则表达式匹配 '-' 或 '_' 之前的字符
        const match = inputString.match(/^[^-_]+/);
        return match ? match[0] : '';
    }
    // 放置事件
    droppable.addEventListener('drop', (event) => {
        event.preventDefault();
        const draggedContent = localStorage.getItem('draggedContent');
        if (draggedContent) {

            let x = event.clientX; // 加上一些偏移量以避免遮挡鼠标指针
            let y = event.clientY;

            const newElement = document.createElement('draggable-component');

            newElement.style.left = x+'px';
            newElement.style.top = y+'px';
            if (elements_data) {
                for (let i = 0; i < elements_data.length; i++) {
                    if (elements_data[i].elname == draggedContent)
                    {
                        newElement.id = getStringBeforeDelimiter(draggedContent)+"_"+String(getRandomNumber());
                        newElement.innerHTML = elements_data[i].elcontent;

                        var html_code = window.parent.document.getElementById('html-code');
                        if (html_code) {
                            html_code.value = html_code.value+"\n<draggable-component id=\""+newElement.id+"\">\n"+elements_data[i].elcontent+"\n</draggable-component>"
                        }
                    }
                }

                droppable.appendChild(newElement);
                localStorage.removeItem('draggedContent'); // 清除存储的数据
            }
            else{
                alert("请稍等再试！")
            }

        }
    });
</script>
<script>

    const floatingDiv = document.querySelector('.floating-div');

    document.addEventListener('mousemove', (event) => {
        // 显示浮动 div
        floatingDiv.style.display = 'block';

        // 设置 div 的位置为鼠标位置
        let x = event.clientX + 10; // 加上一些偏移量以避免遮挡鼠标指针
        let y = event.clientY + 10;

        // 确保 div 不超出视口边界
        if (x + floatingDiv.offsetWidth > window.innerWidth) {
            x = window.innerWidth - floatingDiv.offsetWidth;
        }
        if (y + floatingDiv.offsetHeight > window.innerHeight) {
            y = window.innerHeight - floatingDiv.offsetHeight;
        }

        floatingDiv.style.left = `${x}px`;
        floatingDiv.style.top = `${y}px`;


    });

    document.addEventListener('mouseleave', () => {
        // 鼠标离开窗口时隐藏浮动 div
        floatingDiv.style.display = 'none';
    });

    var flag = false;

    (function($) {
        $.fn.pageRuler = function() {
            let startTime;
            const ruler = $('#coords');
            var designtimer =null;

            this.on('mouseenter', function(e) {
                startTime = Date.now();
                flag = true;
                const $this = $(this);
                const offset = $this.offset();
                const width = $this.outerWidth();
                const height = $this.outerHeight();
                let stylehead = '';
                if  ($this.prop("tagName").toUpperCase() == 'DRAGGABLE-COMPONENT'){

                    stylehead =  '#'+$this.prop("id");
                    ruler.text(`Element: ${stylehead}`);
//                    //console.log(stylehead);
                }
                else{
//                    ruler.text(`内部对象：Element: ${$this.prop("tagName").toLowerCase()}`);
                    stylehead = $this.prop("tagName").toLowerCase();
                    let l_parentElement = this.parentElement;
                    if (stylehead == "")
                    {

                    }
                    else
                    {
                        if (l_parentElement.tagName){
                            while  (l_parentElement.tagName.toUpperCase() !=  'DRAGGABLE-COMPONENT'){
//                            //console.log(stylehead);
                                if (stylehead){
                                    stylehead =  l_parentElement.tagName.toLowerCase() + ' ' + stylehead;
                                }else{
                                    stylehead =  l_parentElement.tagName.toLowerCase();
                                }
                                l_parentElement = l_parentElement.parentElement;

                            }
                        }

                    }

                    stylehead =  '#'+l_parentElement.id + ' ' + stylehead;
                    ruler.text(`Element: ${stylehead}`);
//                    //console.log(stylehead);
                }
//                designtimer = setTimeout(function(){
////                    e.target.style.cursor = "pointer";
//                    //console.log('悬停超过2秒!'+stylehead);
//                },2000)
            });


//            this.on('mouseleave', function(e) {
//                flag = false;
//                clearTimeout(designtimer);
//            });
        };
    })(jQuery);

    $(document).ready(function() {
        let chaoshitime = false;
        $('#content *').pageRuler();

        const gridSize = 10; // Size of each grid cell in pixels

        // Function to create and append grid labels
        function createGridLabels() {
            const $grid = $('#grid');
            const width = $(window).width();
            const height = $(window).height();

            for (let x = 0; x <= width; x += gridSize) {
                if (x % 50 === 0) { // Show label every 100 pixels
                    const leftLabel = $('<div class="grid-label left-label"></div>')
                        .css({
                            left: x,
                            top: 5
                        })
                        .text(x);
                    $grid.append(leftLabel);
                }
            }

            for (let y = 0; y <= height; y += gridSize) {
                if (y % 50 === 0) { // Show label every 100 pixels
                    const topLabel = $('<div class="grid-label top-label"></div>')
                        .css({
                            left: 8,
                            top: y
                        })
                        .text(y);
                    $grid.append(topLabel);
                }
            }
        }

        // Create grid labels on document ready
        createGridLabels();

        // Handle window resize to update grid labels
        $(window).resize(function() {
            $('#grid').empty(); // Clear existing labels
            createGridLabels(); // Recreate labels
        });
        $(document).on('click', function(e) {
            chaoshitime = !chaoshitime;

        });
        // Update coordinates on mouse move
        $(document).on('mousemove', function(e) {
            if (flag  == false){
                const x = e.pageX;
                const y = e.pageY;
                if (x > 0 & y >0){
                    var element = event.target;
                    var stylehead = '';
                    //console.log('Mouse is move:', element.tagName, element.className);
                    //通过此对象，寻找父对象，最多四级，如果父对象是"draggable-component"，则有效，如果是'html'则无效
                    if (element.tagName.toLowerCase() == 'html'){
                        //console.log("无效对象");
                    }
                    else{
                        if (element.tagName.toLowerCase() == 'draggable-component') {
                            //console.log("对象：#"+element.id);
                            stylehead = "#"+element.id;
                        }
                        else{
                            stylehead = element.tagName.toLowerCase();
                            var l_parentElement = element.parentElement;
                            if (l_parentElement.tagName === null){

                            }
                            else{
                                while  (l_parentElement.tagName.toUpperCase() !=  'DRAGGABLE-COMPONENT'){
                                    if (stylehead){
                                        stylehead =  l_parentElement.tagName.toLowerCase() + ' ' + stylehead;
                                    }else{
                                        stylehead =  l_parentElement.tagName.toLowerCase();
                                    }
                                    l_parentElement = l_parentElement.parentElement;
                                    if (l_parentElement.parentElement === null || l_parentElement.parentElement.tagName.toUpperCase() in ['content','body','html'] ) {
                                        break;
                                    }
                                }
                            }
                            stylehead = '#'+l_parentElement.id + ' '+stylehead;

                            //console.log("对象："+stylehead);
                        }
                    }
                    floatingDiv.text = floatingDiv.text+":"+stylehead;

                    if (stylehead.indexOf('body') == -1){
                        $('#coords').text(`X: ${x}px | Y: ${y}px | ,Element Tag：${stylehead}`);
                        if (stylehead){
                            const style = window.getComputedStyle(element);
                            const styleObj = {};

                            // Iterate over all CSS properties and add them to the object
                            for (let i = 0; i < style.length; i++) {
                                const property = style[i];
                                styleObj[property] = style.getPropertyValue(property);
                            }
                            if (!chaoshitime){
                                channel_designer_sendMessage({'key1':stylehead,'key2':styleObj});
                                channel_html_sendMessage({'design_set':1,'attr1':stylehead,'attr2':{}});
                            }

                        }
                    }
                    else{

                        $('#coords').text(`X: ${x}px | Y: ${y}px | ,Element Tag：body`);
                        element = document.body;
                        const style = window.getComputedStyle(element);
                        const styleObj = {};

                        // Iterate over all CSS properties and add them to the object
                        for (let i = 0; i < style.length; i++) {
                            const property = style[i];
                            styleObj[property] = style.getPropertyValue(property);
                        }
                        if (!chaoshitime){
                            channel_designer_sendMessage({'key1':'body','key2':styleObj});
                            channel_html_sendMessage({'design_set':1,'attr1':'','attr2':{}});
                        }
                    }
                }
                else{
                    $('#coords').text(``);
                }
            }
        });
        let hoverTimer;
    });

</script>

<script>
    const channel_designer = new BroadcastChannel('designer_channel');
    const html_channel = new BroadcastChannel('html_channel');
    function channel_designer_sendMessage(message) {
        if (message) {
            channel_designer.postMessage(message);
        }
    }
    function channel_html_sendMessage(message) {
        if (message) {
            html_channel.postMessage(message);
        }
    }
    // 定义一个函数来获取从某个位置开始的第一个子串的位置
    function getSubstringPosition(str, substring, startPosition) {
        // 截取从startPosition开始到字符串末尾的部分
        const slicedStr = str.slice(startPosition);

        // 在截取的字符串中查找子串的位置
        const indexInSliced = slicedStr.indexOf(substring);

        // 如果找到了子串，计算其在原字符串中的实际位置
        if (indexInSliced !== -1) {
            return startPosition + indexInSliced;
        }

        // 如果没有找到子串，返回-1
        return -1;
    }
    function removeSubstring(str, startIndex, endIndex) {
        // 提取从字符串开头到开始位置的子字符串
        const partBefore = str.slice(0, startIndex);

        // 提取从结束位置到字符串末尾的子字符串
        const partAfter = str.slice(endIndex);

        // 拼接两个部分，形成新的字符串
        return partBefore + partAfter;
    }
    function replaceSubstring(str, startIndex, endIndex, newSubstring) {
        // 提取从字符串开头到开始位置的子字符串
        const partBefore = str.slice(0, startIndex);

        // 提取从结束位置到字符串末尾的子字符串
        const partAfter = str.slice(endIndex);

        // 拼接三个部分，形成新的字符串
        return partBefore + newSubstring + partAfter;
    }
    // 在指定位置插入字符串
    function insertString(original, toInsert, position) {
        if (position > original.length) {
            position = original.length;
        }
        return original.slice(0, position) + toInsert + original.slice(position);
    }
    html_channel.onmessage = function(event) {
        if (event.data) {
            var key1 = event.data.attr1;
            if (key1 == 'getattrs') {
                var key2 = event.data.attr2;
                //解析key2,并获取css，然后发送出去
                var stylehead = key2;
                if (stylehead) {

                    const wordsArray = stylehead.split(' ');
                    var element = null;
                    for (let i = 0; i < wordsArray.length; i++) {
                        if (i == 0) {
                            element = document.getElementById(wordsArray[0].replace('#', ''));
                        }
                        else {
                            if (!element) return;
                            element = element.querySelector(wordsArray[i]);
                        }
                    }

                    if (!element) return;
                    const attrsObj = {};
                    Array.from(element.attributes).forEach(attr => {
                        const property = attr.name;
                        attrsObj[property] = attr.value;
                    });
                    channel_html_sendMessage({'design_set':0,'attr1': stylehead, 'attr2': attrsObj})
                }
            }
            else if (key1 == 'setattr'){
                var key2 = event.data.attr2;
                var stylehead = key2;
                if (stylehead) {
                    const wordsArray = stylehead.split(' ');
                    var element = null;
                    for (let i = 0; i < wordsArray.length; i++) {
                        if (i == 0) {
                            element = document.getElementById(wordsArray[0].replace('#', ''));
                        }
                        else {
                            element = element.querySelector(wordsArray[i]);
                        }
                    }

                    if (!element) return;
                    //设置elment对象属性值，并更新html中对象的属性值
                    element.setAttribute(event.data.attr_name,event.data.attr_new_value);
                    //查找html文本信息，并修改其属性值
                    var html_code = window.parent.document.getElementById('html-code');
                    if (html_code) {
                        var start_pos = -1;
                        var end_pos = -1;
                        var parent_start_pos = -1;
                        var notfound = false;
                        var xuhao = 0;
                        for (let i = 0; i < wordsArray.length; i++) {
                            let str_tag_start = "<draggable-component id=\"" + wordsArray[0].replace('#', '') + "\">";
                            if (i == 0) {
                                start_pos = html_code.value.indexOf("<draggable-component id=\"" + wordsArray[0].replace('#', '') + "\">");
                                if (start_pos != -1) {
                                    end_pos = getSubstringPosition(html_code.value, "</draggable-component>", start_pos);
                                }else{
                                    notfound = true;
                                    break;
                                }
                                parent_start_pos = start_pos + str_tag_start.length;
                            }
                            else {
                                start_pos = getSubstringPosition(html_code.value, wordsArray[i], parent_start_pos);
                                if (start_pos == -1 || start_pos > end_pos){
                                    notfound = true;
                                    break;
                                }
                                parent_start_pos = start_pos + wordsArray[i].length;
                            }
                            xuhao = i;
                        }
                        if (xuhao == 0 ||  notfound ){

                        }
                        else if (xuhao > 0 && xuhao == wordsArray.length -1){
                            //查找到元素的起始点
                            if (parent_start_pos != -1) {
                                //在此其实位置开始找字串并替换
                                start_pos = getSubstringPosition(html_code.value, event.data.attr_name + "=", parent_start_pos);
                                if (start_pos != -1) {
                                    //从起始位置替换某个子串
                                    if (event.data.attr_old_value.length == 0){
                                        new_start_pos = getSubstringPosition(html_code.value, event.data.attr_old_value, start_pos+event.data.attr_name.length+1);
                                        html_code.value = insertString(html_code.value, event.data.attr_new_value, new_start_pos+1);
                                    }
                                    else{
                                        new_start_pos = getSubstringPosition(html_code.value, event.data.attr_old_value, start_pos+event.data.attr_name.length+1);
                                        html_code.value = replaceSubstring(html_code.value, new_start_pos, new_start_pos+event.data.attr_old_value.length, event.data.attr_new_value);
                                    }
                                }
                            }
                        }

                    }

                }
            }
        }
    }
    channel_designer.onmessage = function(event) {

        if (event.data){
            var key1 = event.data.key1;
            if (key1 == 'getcss'){
                var key2 = event.data.key2;
                //解析key2,并获取css，然后发送出去
                var stylehead = key2;
                var styleObj = {};

                if (stylehead){

                    const wordsArray = stylehead.split(' ');
                    var element = null;
                    for (let i = 0; i < wordsArray.length; i++) {
                        if (i == 0){
                            element = document.getElementById(wordsArray[0].replace('#',''));
                        }
                        else{
                            element = element.querySelector(wordsArray[i]);
                        }
                    }

                    const style = window.getComputedStyle(element);
                    const styleObj = {};

                    // Iterate over all CSS properties and add them to the object
                    for (let i = 0; i < style.length; i++) {
                        const property = style[i];
                        styleObj[property] = style.getPropertyValue(property);
                    }
                    channel_designer_sendMessage({'key1':stylehead,'key2':styleObj})
                }
            }
            else if (key1 == 'setcss'){

                //console.log(JSON.stringify(key3));
                var key2 = event.data.key2;
                var stylehead = key2;
                var element = null;
                var key3 = event.data.key3;
                if (stylehead == 'body'){
                    element = document.body;
                }
                else{
                    const wordsArray = stylehead.split(' ');

                    for (let i = 0; i < wordsArray.length; i++) {
                        if (i == 0){
                            element = document.getElementById(wordsArray[0].replace('#',''));
                        }
                        else{
                            element = element.querySelector(wordsArray[i]);
                        }
                    }
                }
                element.style[Object.keys(key3)[0]] = Object.values(key3)[0];
                var v_key_use = Object.keys(key3)[0];
                var v_value_use = Object.values(key3)[0];
                //console.log(key3,v_key_use,v_value_use);

                //修改css内容区域的css内容
                var css_code = window.parent.document.getElementById('css-code');
                //首先查找里面是否包含相关csshead的内容，如果有修改，如果没有增加
                const stylehead_kuohao = stylehead+"{";
                if (css_code.value.indexOf(stylehead_kuohao) != -1){  //修改
                    //此内部是否包含key，包含修改，不包含增加
                    //获取css 此css子块
                    var start_pos = css_code.value.indexOf(stylehead_kuohao);
                    if (start_pos != -1 && v_value_use != ''){
                        //查找此段的结束位置
                        var ll_end_pos = getSubstringPosition(css_code.value,"}",start_pos);
                        //获取字串
                        var sub_css = css_code.value.substring(start_pos,ll_end_pos+1);

                        if (sub_css.indexOf(v_key_use) == -1)  //增加
                        {

                            css_code.value = insertString(css_code.value,'\n    '+v_key_use+':'+v_value_use+";\n",ll_end_pos);
                            //console.log(key3,v_key_use,v_value_use);

                        }
                        else{                                             //修改
                            const l_key_space = " "+v_key_use;
                            var end_pos = getSubstringPosition(css_code.value,l_key_space,start_pos);
                            if (end_pos != -1){
                                var l_len = v_key_use.length + 1;
                                var end_pos02 = getSubstringPosition(css_code.value,";",end_pos+l_len);

                                css_code.value = replaceSubstring(css_code.value,end_pos+l_len+1,end_pos02,v_value_use);
                                //console.log(key3,v_key_use,v_value_use);

                            }
                        }
                    }
                    else if (start_pos != -1 && v_value_use == ''){
                        //删除这个属性
                        var ll_end_pos = getSubstringPosition(css_code.value,"}",start_pos);
                        //获取字串
                        var sub_css = css_code.value.substring(start_pos,ll_end_pos+1);

                        if (sub_css.indexOf(v_key_use) != -1)
                        {
                            //删除
                            const l_key_space = " "+v_key_use;
                            var end_pos = getSubstringPosition(css_code.value,l_key_space,start_pos);
                            if (end_pos != -1){
                                var l_len = v_key_use.length + 1;
                                var end_pos02 = getSubstringPosition(css_code.value,";",end_pos+l_len);
                                css_code.value = replaceSubstring(css_code.value,end_pos,end_pos02+1,'');
                            }
                        }
                    }

                }
                else{                                          //增加
                    css_code.value = css_code.value + "\n"+stylehead+"{";
                    css_code.value = css_code.value + "\n    "+v_key_use+":"+v_value_use+';\n';
                    css_code.value = css_code.value + "}\n";
                }
            }
            else if (key1 == 'delelement'){
                //console.log(JSON.stringify(key3));
                var key2 = event.data.key2;
                var stylehead = key2;
                var key3 = event.data.key3;
                const wordsArray = stylehead.split(' ');
                document.getElementById(wordsArray[0].replace('#','')).remove();
                var html_code = window.parent.document.getElementById('html-code');
                if (html_code) {
                    var start_pos =  html_code.value.indexOf("<draggable-component id=\""+wordsArray[0].replace('#','')+"\">");
                    if (start_pos != -1)
                    {
                        var end_pos = getSubstringPosition(html_code.value,"</draggable-component>",start_pos);
                        html_code.value = removeSubstring(html_code.value, start_pos,end_pos+23);
                    }
                }

                var css_code = window.parent.document.getElementById('css-code');
                if (css_code) {
                    var start_pos =  css_code.value.indexOf(wordsArray[0]);
                    while (start_pos != -1){
                        var end_pos = getSubstringPosition(css_code.value,"}",start_pos);
                        css_code.value = removeSubstring(css_code.value, start_pos,end_pos+1);
                        start_pos =  css_code.value.indexOf(wordsArray[0]);
                    }

                }
            }
            else if (key1 == 'modelementid'){

                //console.log(JSON.stringify(key3));
                var key2 = event.data.key2;
                var key3 = event.data.key3;
                document.getElementById(key2).id=key3;

                var html_code = window.parent.document.getElementById('html-code');
                if (html_code) {
                    html_code.value = html_code.value.replace(key2,key3);
                }
                var css_code = window.parent.document.getElementById('css-code');
                if (css_code) {
                    css_code.value = css_code.value.replace(key2,key3);
                }
            }
        }
    };


</script>

</body>
<script>
    function loadScriptSelf(filename) {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = filename;
        script.charset = 'utf-8'; // 确保使用 UTF-8 编码
        script.async = true;
        // 可选：添加事件监听器以检测脚本何时加载完成
        script.onload = function() {
            //console.log('Script loaded and executed:', filename);
        };

        script.onerror = function() {
            console.error('Failed to load script:', filename);
        };

        document.head.appendChild(script); // 将脚本添加到 head 或 body 中
    }
    const scriptName = '../yingyongs/'+v_yingyongname+'/'+v_yingyongname+'.js?v=' + new Date().getTime();  // 这里可以使用任何变量或逻辑来决定文件名

    document.addEventListener('DOMContentLoaded', function() {
        loadScriptSelf(scriptName);
    });

</script>
</html>


